import React from "react";
import { firstToUpper3 } from "./DataUtil";

interface TextChangeStates {
    text:string;
    newText: string
}

interface TextChangeProps {

}

class TextChange extends React.Component<TextChangeProps, TextChangeStates>{

    constructor(props: TextChangeProps | Readonly<TextChangeProps>) {
        super(props)
        this.state = {
            text:"",
            newText: ""
        }

    }
    changeText = () => {
        this.setState({
            newText:firstToUpper3(this.state.text)
        })
    }
    oldChange = (a)=>{
        this.setState({
            text:a.target.value
        })
    }
    
    render() {
        return (<>
            <section >
                <div style={{ width: '50%' ,float:'left'}}>

                    <h3>转化前</h3>
                    <textarea style={{ width: 500,height:600 }} title="转化前"  onChangeCapture={this.oldChange}>
                    </textarea>
                </div>
                <div style={{ width: '50%' ,float:'left'}}>
                    <h3>转化后</h3>
                    <textarea style={{ width: 500,height:600 }} title="转换后" value= {this.state.newText}>
                       
                    </textarea>
                </div>
                <div style={{clear:"both"}}></div> 
            </section>
            <section>
                <button onClick={() => this.changeText()}>首字母大写</button>
            </section>

        </>)
    }
}

export default TextChange;